<template>
  <div id="InoviceDetail">
    <!-- 麵包屑導航 -->
    <BreadcrumbComponent :breadcrumbItems="breadcrumbItems" />

    <!-- 消息詳情卡片 -->
    <a-card title="訂單詳情" class="detail-card" :loading="loading">
      <template v-if="!loading && !inoviceDetail.id">
        <a-empty description="數據加載失敗，請重試" />
      </template>
      <template v-else>
        <a-descriptions binoviceed title="基本信息">
          <a-descriptions-item label="發票編號">
            {{ inoviceDetail.invNo }}
          </a-descriptions-item>
          <a-descriptions-item label="發票淨額">
            $ {{ Number(inoviceDetail.invoiceNet).toLocaleString() }}
          </a-descriptions-item>
          <a-descriptions-item label="交易日期">
            {{ inoviceDetail.invDate }}
          </a-descriptions-item>
          <a-descriptions-item label="店鋪">
            {{ inoviceDetail.shopName }}
          </a-descriptions-item>

          <template v-if="inoviceDetail.pcardCode">
            <a-descriptions-item label="會員卡">
              {{ inoviceDetail.pcardName }} ( {{ inoviceDetail.pcardCode }} )
            </a-descriptions-item>
            <a-descriptions-item label="會員卡折扣">
              {{ 100 - inoviceDetail.pcardDiscount }}%
            </a-descriptions-item>
          </template>

          <template v-if="inoviceDetail.faCode">
            <a-descriptions-item label="定額優惠">
              {{ inoviceDetail.faName }}( {{ inoviceDetail.faCode }} )
            </a-descriptions-item>
            <a-descriptions-item label="優惠金額">
              $ {{ inoviceDetail.faAmount.toLocaleString() }}
            </a-descriptions-item>
          </template>
          <a-descriptions-item label="是否診症">
            <a-tag color="green" v-if="inoviceDetail.consultFlag">診症</a-tag>
            <a-tag color="green" v-else>非診症</a-tag>
          </a-descriptions-item>
          <template v-if="inoviceDetail.consultFlag">
            <a-descriptions-item label="診金歸屬">
              <a-tag color="orange" v-if="inoviceDetail.consultShareClass === 1"
                >活動推廣</a-tag
              >
              <a-tag
                color="green"
                v-else-if="inoviceDetail.consultShareClass === 2"
                >自定義</a-tag
              >
              <a-tag
                color="blue"
                v-else-if="inoviceDetail.consultShareClass === 3"
                >指定服務</a-tag
              >
              <a-tag
                color="default"
                v-else-if="inoviceDetail.consultShareClass === 0"
                >默認</a-tag
              >
              <a-tag color="red" v-else>未知</a-tag>
            </a-descriptions-item>
          </template>

          <a-descriptions-item label="類別">
            {{ inoviceDetail.subClassName }}
          </a-descriptions-item>
        </a-descriptions>

        <!-- 醫師 -->
        <a-descriptions binoviceed title="醫師信息">
          <a-descriptions-item label="醫師名">
            {{ inoviceDetail.doctorName }}
          </a-descriptions-item>
          <a-descriptions-item label="診証費">
            $ {{ Number(inoviceDetail.consultFee).toLocaleString() }}
          </a-descriptions-item>
          <a-descriptions-item label="診証次數">
            {{ inoviceDetail.consultCount }}
          </a-descriptions-item>
        </a-descriptions>

        <!-- 銷售項 -->
        <a-descriptions binoviceed title="業務大類銷售項信息">
          <a-descriptions-item label="處方銷售額">
            $ {{ Number(inoviceDetail.cmAmount).toLocaleString() }}
          </a-descriptions-item>
          <a-descriptions-item label="蟲草銷售額">
            $ {{ Number(inoviceDetail.cyAmount).toLocaleString() }}
          </a-descriptions-item>
          <a-descriptions-item label="燕窩銷售額">
            $ {{ Number(inoviceDetail.neAmount).toLocaleString() }}
          </a-descriptions-item>
          <a-descriptions-item label="安宮銷售額">
            $ {{ Number(inoviceDetail.agAmount).toLocaleString() }}
          </a-descriptions-item>
          <a-descriptions-item label="本廠銷售額">
            $ {{ inoviceDetail.wytAmount.toLocaleString() }}
          </a-descriptions-item>
          <a-descriptions-item label="OEM銷售額">
            $ {{ Number(inoviceDetail.oemAmount).toLocaleString() }}
          </a-descriptions-item>
        </a-descriptions>

        <!-- 針灸&天灸 -->
        <a-descriptions binoviceed title="針灸&天灸服務">
          <a-descriptions-item label="針灸服務金額" span="0.8">
            $ {{ inoviceDetail.apAmount.toLocaleString() }}
          </a-descriptions-item>
          <a-descriptions-item label="針灸次數" span="0.7">
            {{ inoviceDetail.apCount }}
          </a-descriptions-item>
          <a-descriptions-item label="天灸服務金額" span="0.8">
            $ {{ inoviceDetail.tpAmount.toLocaleString() }}
          </a-descriptions-item>
          <a-descriptions-item label="天灸次數" span="0.7">
            {{ inoviceDetail.tpCount }}
          </a-descriptions-item>
        </a-descriptions>
      </template>
    </a-card>

    <!-- 使用列表 遍歷發票項 -->
    <a-table
      :dataSource="inoviceDetail.items"
      :columns="invoiceItemsColumns"
      class="invoice-items-table"
      :loading="loading"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'couponAllocatedAmount'">
          $ {{ record.couponAllocatedAmount.toLocaleString() }}
        </template>
        <template v-if="column.dataIndex === 'netAmount'">
          $ {{ Number(record.netAmount).toLocaleString() }}
        </template>
        <template v-if="column.dataIndex === 'productName'">
          {{ record.productName }}
          <template v-if="record.productClass == '診証'">
            - {{ record.productClass }}
          </template>
        </template>
      </template>
    </a-table>
    <BackButton />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { invoiceApi } from "@/api";
import BreadcrumbComponent from "@/components/BreadcrumbComponent.vue";
import BackButton from "@/components/BackButton.vue";

const route = useRoute();
const router = useRouter();

// 麵包屑導航
const breadcrumbItems = [
  { url: "/sales/invoice", name: "醫單列表" },
  { url: "", name: "詳情" },
];

// 詳情數據
const inoviceDetail = ref<any>({});
const loading = ref(true);

const invoiceItemsColumns = [
  {
    title: "行號",
    dataIndex: "lineNo",
  },
  {
    title: "產品名稱",
    dataIndex: "productName",
  },
  {
    title: "數量",
    dataIndex: "quantity",
  },
  {
    title: "單位",
    dataIndex: "productUnit",
  },
  {
    title: "優惠券分配金額",
    dataIndex: "couponAllocatedAmount",
  },
  {
    title: "淨金額",
    dataIndex: "netAmount",
  },
];

// 獲取詳情
const fetchInoviceDetail = async () => {
  try {
    const { data } = await invoiceApi.getInoviceDetail(Number(route.params.id));
    inoviceDetail.value = data;
  } catch (error) {
    console.error("獲取消息詳情失敗", error);
  } finally {
    loading.value = false;
  }
};

// 初始化加載
onMounted(() => {
  fetchInoviceDetail();
});
</script>

<style scoped>
/* ('+'符號是相鄰組合器) */
.ant-descriptions + .ant-descriptions {
  margin-top: 16px;
}

.detail-card {
  margin-top: 16px;
}

.invoice-items-table {
  margin-top: 24px;
}
</style>
